<template>
	<!-- 赵笛 2023/4/12 -->
	<!-- 聊天前置 -->
	<view style="background: #f5f5f5;">
<!-- 		<el-card style="width: 300px; height: 300px; color: #333">
		 <div style="padding-bottom: 10px; border-bottom: 1px solid #ccc">在线用户<span style="font-size: 12px">（点击聊天气泡开始聊天）</span></div>
		  <div style="padding: 10px 0" v-for="user in users" :key="user.username">
		    <span>{{ user.username }}</span>
		    <i class="el-icon-chat-dot-round" style="margin-left: 10px; font-size: 16px; cursor: pointer"
		       @click="chatUser = user.username"></i>
		    <span style="font-size: 12px;color: limegreen; margin-left: 5px" v-if="user.username === chatUser">chatting...</span>
		  </div>
		</el-card> -->
		<view class="view-box">
			<span class="text-title left">
				<u-icon name="server-fill" color="#CD7F32" size="28"></u-icon>
			</span>
			<span class="text-title" style="margin-left:6px">
				在线客服
			</span>
		</view>
		<view class="view-box">
			<view v-for="user in users" :key="user.nickName" class = "user-box">
			  <span class="left text-title">{{user.nickName}}</span>
				<u-icon name="chat" color="#3CCCA6" size="24" class="left" style="margin-left:10px" @click="changeColor(user.nickName)" v-show="chatShow"></u-icon>
				<u-icon name="chat" color="#999999" size="24" class="left" style="margin-left:10px" @click="changeColor(user.nickName)" v-show="!chatShow"></u-icon>
			  <span style="font-size: 12px;color: #3CCCA6; margin-left: 5px" v-if="user.nickName === chatUser" v-show="chatShow">正在咨询...</span>
			</view>
		</view>
		<view class="view-box">
			<view class="text-title mar-bottom">
			  <text class="left" >乐工坊</text>
				<text style="color:#CD7F32">{{chatUser }}</text>
				<u-icon name="server-man" color="#ef9930" size="24" style="margin-left:10px" class="left"></u-icon>
			</view>
			<div style="height: 350px; overflow:auto; border-top: 1px solid #ccc" v-html="content"></div>
			<div style="height: 200px">
			  <textarea v-model="text" style="height: 160px; width: 100%; padding: 20px; border: none; border-top: 1px solid #ccc;
			   border-bottom: 1px solid #ccc; outline: none"></textarea>
			  <view style="width:60px;" class="right">
			    <u-button type="primary" size="mini" @click="send">发送</u-button>
			  </view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
				user: {},
				isCollapse: false,
				users: [],
				chatUser: '',
				text: "",
				messages: [],
				content: '',
				chatShow:false,
			}
		},
		methods: {
			changeColor(username){
				this.chatUser = username
				this.chatShow = !this.chatShow 
			},
			send() {
			  if (!this.chatUser) {
			    this.$message({type: 'warning', message: "请选择聊天对象"})
			    return;
			  }
			  if (!this.text) {
			    this.$message({type: 'warning', message: "请输入内容"})
			  } else {
			    if (typeof (WebSocket) == "undefined") {
			      console.log("您的浏览器不支持WebSocket");
			    } else {
			      console.log("您的浏览器支持WebSocket");
			      // 组装待发送的消息 json
			      // {"from": "zhang", "to": "admin", "text": "聊天文本"}
			      let message = {from: this.user.username, to: this.chatUser, text: this.text}
			      socket.send(JSON.stringify(message));  // 将组装好的json发送给服务端，由服务端进行转发
			      this.messages.push({user: this.user.username, text: this.text})
			      // 构建消息内容，本人消息
			      this.createContent(null, this.user.username, this.text)
			      this.text = '';
			    }
			  }
			},
			init() {
				const userInfo = wx.getStorageSync('user')
				this.user =userInfo
				console.log(this.user);
			  // this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {}
			  let username = this.user.nickName;
			  let _this = this;
			  if (typeof (WebSocket) == "undefined") {
			    console.log("您的浏览器不支持WebSocket");
			  } else {
			    console.log("您的浏览器支持WebSocket");
			    let socketUrl = "ws://localhost:9090/imserver/" + username;
			    if (socket != null) {
			      socket.close();
			      socket = null;
			    }
			    // 开启一个websocket服务
			    socket = new WebSocket(socketUrl);
			    //打开事件
			    socket.onopen = function () {
			      console.log("websocket已打开");
			    };
			    //  浏览器端收消息，获得从服务端发送过来的文本消息
			    socket.onmessage = function (msg) {
			      console.log("收到数据====" + msg.data)
			      let data = JSON.parse(msg.data)  // 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
			      if (data.users) {  // 获取在线人员信息
			        _this.users = data.users.filter(user => user.username !== username)  // 获取当前连接的所有用户信息，并且排除自身，自己不会出现在自己的聊天列表里
			      } else {
			        // 如果服务器端发送过来的json数据 不包含 users 这个key，那么发送过来的就是聊天文本json数据
			        //  // {"from": "zhang", "text": "hello"}
			        if (data.from === _this.chatUser) {
			          _this.messages.push(data)
			          // 构建消息内容
			          _this.createContent(data.from, null, data.text)
			        }
			      }
			    };
			    //关闭事件
			    socket.onclose = function () {
			      console.log("websocket已关闭");
			    };
			    //发生了错误事件
			    socket.onerror = function () {
			      console.log("websocket发生了错误");
			    }
			  }
			}
		},
		onLoad() {
			this.init()
		}
	}
</script>

<style>
	/**
	 * 公共样式 ↓
	 */
	.parent-box{
		height:100%;
		background-color: #f5f5f5;
	}
	.left{
		float:left;
	}
	.right{
		float:right;
	}
	.text-title {
		//文字标题样式
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.text-dark {
		//深色文字样式
		font-size: 12px;
		color: #666666;
	}

	.text-light {
		//浅色文字样式
		font-size: 12px;
		color: #999999;
	}
	.text-price{
		font-size: 18px;
		color: #E06181;
		font-weight: bold;
	}
	.text-center {
		//居中文字样式
		text-align: center;
	}
	.view-box {
		width:100%;
		margin-bottom: 10px ;
		line-height: 24px;
		background: #fff;
		padding: 16px 10px;
		margin-bottom: 6px;
	}
	.mar-bottom{
		margin-bottom:10px;
	}
	

	/**
	 * 公共样式 ↑
	 */
	.user-box{
		/* border-bottom:1px solid #f5f5f5; */
		height:24px;
	}
</style>
